<template>
    <div :style="moduleMain">
        <div :style="homemainbox">
            <div :style="setupbox1">
                <div :style="setuptitlebox">
                   甲醛浓度
                </div>
                <div :style="[text,top25]">
                    阀值设定
                </div>
                <div :style="[text,top75]">
                    <input v-model="formaldehyde" :style="input"  step="0.01"  type="number" maxlength="2" placeholder="请输入甲醛浓度报警阀值(mg/m^3)" value="">
                </div>
                <div :style="[text,top125]">
                    <div :style="buttionbox">
                        <button v-on:click="setupFormaldehyde()" type="button" :style="btn">提&nbsp;&nbsp;交</button>
                    </div>
                </div>
            </div>
            <div :style="setupbox2">
                <div :style="setuptitlebox">
                    SO2气体
                </div>
                <div :style="[text,top25]">
                    阀值设定
                </div>
                <div :style="[text,top75]">
                    <input v-model="so2" :style="input"  step="0.01"  type="number" maxlength="2" placeholder="请输入SO2腐蚀性气体报警阀值" value="" >
                </div>
                <div :style="[text,top125]">
                    <div :style="buttionbox">
                        <button v-on:click="setupSo2()" type="button" :style="btn">提&nbsp;&nbsp;交</button>
                    </div>
                </div>
            </div>
            <div :style="setupbox3">
                <div :style="setuptitlebox">
                    H2S气体
                </div>
                <div :style="[text,top25]">
                    阀值设定
                </div>
                <div :style="[text,top75]">
                    <input v-model="h2s" :style="input"  step="0.01"  type="number" maxlength="2" placeholder="请输入H2S腐蚀性气体报警阀值" value="">
                </div>
                <div :style="[text,top125]">
                    <div :style="buttionbox">
                        <button v-on:click="setupH2s()" type="button" :style="btn">提&nbsp;&nbsp;交</button>
                    </div>
                </div>
            </div>
            <div :style="setupbox4">
                <div :style="setuptitlebox">
                    CL2气体
                </div>
                <div :style="[text,top25]">
                    阀值设定
                </div>
                <div :style="[text,top75]">
                    <input v-model="cl2" :style="input"  step="0.01"  type="number" maxlength="2" placeholder="请输入CL2腐蚀性气体报警阀值" value="">
                </div>
                <div :style="[text,top125]">
                    <div :style="buttionbox">
                        <button v-on:click="setupCl2()" type="button" :style="btn">提&nbsp;&nbsp;交</button>
                    </div>
                </div>
            </div>
            <div :style="setupbox5">
                <div :style="setuptitlebox">
                    HCL气体
                </div>
                <div :style="[text,top25]">
                    阀值设定
                </div>
                <div :style="[text,top75]">
                    <input v-model="hcl" :style="input"  step="0.01"  type="number" maxlength="2" placeholder="请输入HCL腐蚀性气体报警阀值" value="" >
                </div>
                <div :style="[text,top125]">
                    <div :style="buttionbox">
                        <button v-on:click="setupHcl()" type="button" :style="btn">提&nbsp;&nbsp;交</button>
                    </div>
                </div>
            </div>
            <div :style="setupbox6">
                <div :style="setuptitlebox">
                    烟雾浓度
                </div>
                <div :style="[text,top25]">
                    阀值设定
                </div>
                <div :style="[text,top75]">
                    <input v-model="smoke" :style="input"  step="0.01"  type="number" maxlength="2" placeholder="请输入烟雾浓度报警阀值" value="" >
                </div>
                <div :style="[text,top125]">
                    <div :style="buttionbox">
                        <button v-on:click="setupSmoke()" type="button" :style="btn">提&nbsp;&nbsp;交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="text/javascript">
import swal from 'sweetalert'
export default {
  name: 'alertparametersetup',
  mounted () {
    this.sessionId = this.$route.query.username
  },
  methods: {
    setupParameter: function (parameter, type) {
      let postData = {
        parameter: parameter,
        type: type,
        sessionId: this.sessionId
      }
      this.axios.get(process.env.VUE_APP_BASE_API + '/monitor-alertparametersetup/alertparametersetup/setupParameter', {
        params: {
          ...postData
        }
      }).then((response) => {
        if (response.data.message === 'success') {
          swal({title: '提示', text: '设置完成', icon: 'success', button: '确定'})
        } else {
          swal({title: '提示', text: response.data.message, icon: 'warning', button: '确定'})
        }
      }).catch(error => {
        if (error.response.status === 401) {
          swal({title: '提示', text: '页面过期请重新登录', icon: 'warning', button: '确定'}).then(() => {
            this.$router.push({path: '/'})
          })
        } else if (error.response.status === 402) {
          swal({title: '提示', text: '非法访问强制退出', icon: 'warning', button: '确定'}).then(() => {
            this.$router.push({path: '/'})
          })
        }
      })
    },
    setupSmoke: function () {
      this.setupParameter(this.smoke, 5)
    },
    setupHcl: function () {
      this.setupParameter(this.hcl, 4)
    },
    setupCl2: function () {
      this.setupParameter(this.cl2, 3)
    },
    setupH2s: function () {
      this.setupParameter(this.h2s, 2)
    },
    setupSo2: function () {
      this.setupParameter(this.so2, 1)
    },
    setupFormaldehyde: function () {
      this.setupParameter(this.formaldehyde, 0)
    }
  },
  data () {
    return {
      sessionId: '',
      formaldehyde: '',
      so2: '',
      h2s: '',
      cl2: '',
      hcl: '',
      smoke: '',
      btn: {
        width: '50px',
        height: '25px'
      },
      buttionbox: {
        position: 'absolute',
        width: '60px',
        height: '25px',
        marginLeft: '42px'
      },
      top25: {
        top: '25px'
      },
      top75: {
        top: '75px'
      },
      top125: {
        top: '125px'
      },
      setuptitlebox: {
        position: 'absolute',
        width: '90px',
        height: '20px',
        marginLeft: '30px',
        textAlign: 'center',
        lineHeight: '14px',
        color: '#E7EC92'
      },
      input: {
        border: '1px solid #006699',
        width: '200px',
        height: '20px',
        backgroundColor: '#174A7F',
        lineHeight: '20px',
        color: '#FFFFFF',
        textIndent: '10px'
      },
      text: {
        position: 'absolute',
        width: '300px',
        height: '25px',
        lineHeight: '25px',
        textAlign: 'center',
        color: '#E7EC92',
        textOverflow: 'ellipsis',
        overflow: 'hidden',
        whiteSpace: 'nowrap'
      },
      homemainbox: {
        position: 'relative',
        width: '1000px',
        height: '450px'
      },
      moduleMain: {
        position: 'absolute',
        width: '1000px',
        height: '450px',
        marginLeft: '200px',
        top: '0px'
      },
      setupbox1: {
        position: 'absolute',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/10.png') + ')',
        width: '300px',
        height: '200px',
        marginTop: '5px'
      },
      setupbox2: {
        position: 'absolute',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/10.png') + ')',
        width: '300px',
        height: '200px',
        marginTop: '5px',
        marginLeft: '350px'
      },
      setupbox3: {
        position: 'absolute',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/10.png') + ')',
        width: '300px',
        height: '200px',
        marginTop: '5px',
        marginLeft: '700px'
      },
      setupbox4: {
        position: 'absolute',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/10.png') + ')',
        width: '300px',
        height: '200px',
        marginTop: '245px'
      },
      setupbox5: {
        position: 'absolute',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/10.png') + ')',
        width: '300px',
        height: '200px',
        marginTop: '245px',
        marginLeft: '350px'
      },
      setupbox6: {
        position: 'absolute',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(' + require('@/assets/img/10.png') + ')',
        width: '300px',
        height: '200px',
        marginTop: '245px',
        marginLeft: '700px'
      }
    }
  }
}
</script>
<style scoped>
    span:hover {
      color: #85C5E8 !important;
    }
    span{
      cursor:pointer !important;
    }
    button:focus,input::-moz-focus-inner, button::-moz-focus-inner{
        outline: 0;
    }
    button:hover{
        background-color:#87CDF1;
    }
    button:active{
        background-color:#006699;
    }
    button{
        cursor:pointer !important;
        background-color:#3BA4EF;
        color:#FFFFFF;
        border-radius: 5px;
        border: none;
        outline: 0;
    }
</style>
